<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-input v-model="filters.username" v-enter @enter.native="getUserId" placeholder="用户名"></el-input>
					<input id="hiddenText" type="text" style="display:none" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getUserId">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleAdd">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="users" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
			<el-table-column type="index" width="60">
			</el-table-column>
			<el-table-column prop="userid" label="用户ID" width="160" sortable>
			</el-table-column>
			<el-table-column prop="username" label="用户名" width="295" sortable>
			</el-table-column>
			<el-table-column label="操作" width="563">
				<template scope="scope">
					<el-button type="primary" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button type="primary" size="small" @click="handlePost(scope.$index, scope.row)">分配角色</el-button>
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row,users)" >删除</el-button>

				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
			</el-pagination>
		</el-col>

		<!--分配角色界面-->
		<el-dialog title="分配角色" v-model="assignRole" :close-on-click-modal="false">
			<el-form :model="assignForm" label-width="80px"  ref="assignForm">
				<el-form-item label="选择角色" prop="userRole" >
					<el-select v-model="value" clearable  placeholder="请选择" :loading="Rloading">
    					<el-option v-for="item in options" :label="item.rolename" :value="item.roleid">
    				</el-option>
 				 </el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="assignRole = false;value=''">取消</el-button>
				<el-button type="primary" @click.native="assignSubmit" :loading="assignLoading">提交</el-button>
			</div>
		</el-dialog>

		<!--编辑界面-->
		<el-dialog title="编辑" v-model="editFormVisible" :close-on-click-modal="false">
			<el-form :model="editForm" label-width="80px"  ref="editForm">
				<el-form-item label="用户名" prop="username">
					<el-input v-model="editForm.username" auto-complete="off"></el-input>
					<input id="hiddenText" type="text" style="display:none" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>

		<!--新增界面-->
		<el-dialog title="新增" v-model="addFormVisible" :close-on-click-modal="false">
			<el-form :model="addForm" label-width="80px"  ref="addForm">
				<el-form-item label="用户名" prop="username">
					<el-input v-model="addForm.username" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input v-model="addForm.password" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
import util from 'src/js/util'
	export default {
		data() {
			return {
				delData:'',
				options: [],
				Rloading:false,
        		value: '',
				filters: {
					username: ''
				},
				users: [],
				total: 0,
				page: 0,
				listLoading: false,

				assignRole: false,
				assignLoading: false,
				
				editFormVisible: false,//编辑界面是否显示
				editLoading: false,

				assignForm:{
					userid:'',
					username:''
				},

				//编辑界面数据
				editForm: {
					username:'',
					password:''
				},

				addFormVisible: false,//新增界面是否显示
				addLoading: false,

				//新增界面数据
				addForm: {
					username: '',
					password:''
				}

			}
		},
		methods: {
			handleCurrentChange(val) {
				this.page = val-1;
				this.getUsers();
			},
			getRole() {
			var tokenname = sessionStorage.getItem("key");
			this.Rloading = true;
			var _this = this;
			var pages = this.page;
			$.ajax({
				type:"GET",
				url:"http://101.200.56.75/apis/role/getList?page=0&size=100&token="+tokenname+"&sort=roleid,asc",
				dataType:"JSON",
				success:function(msg){
				if(msg.payload.msg!="token 过期或者token不存在 请重新登陆"){
					if(msg.payload.success==1){					
					_this.Rloading = false;
					_this.options = msg.payload.content.content;
					}else{
						_this.Rloading = false;
						_this.$alert(msg.payload.msg,{
								type:'warning'
									});
					}
					}else{		
								_this.$alert(msg.payload.msg,{
								type:'warning'
									});
								_this.$router.push({ path: '/login' });
							}
				 }		
				 
			});	
			},
			//获取用户列表
			getUsers() {
			var tokenname = sessionStorage.getItem("key");
			this.listLoading = true;
			var _this = this;
			var pages = this.page;
			$.ajax({
				type:"GET",
				url:"http://101.200.56.75/apis/user/getList?page="+pages+"&token="+tokenname+"&size=10&sort=userid,asc",
				dataType:"JSON",
				success:function(msg){
					if(msg.payload.msg!="token 过期或者token不存在 请重新登陆"){
						if(msg.payload.success==1){						
						_this.users = msg.payload.content.content;
						_this.total = msg.payload.content.totalElements;
						_this.listLoading = false;
						}else{
							_this.listLoading = false;
							_this.$alert(msg.payload.msg,{
								type:'warning'
									});
						}
						}else{
								_this.$alert(msg.payload.msg,{
								type:'warning'
									});
								_this.$router.push({ path: '/login' });
							}
				 }
			});	
			},
			//删除
			handleDel: function (index, row,rows) {
				var index = index;
				var rows = rows;
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {				
				var tokenname = sessionStorage.getItem("key");
				this.listLoading = true;
				var _this = this;
				this.$http({
					method:'DELETE',
					url:"http://101.200.56.75/apis/user/deleteByIds/?token="+tokenname,
					body:{rows:[row.userid]},
					headers: {"X-Requested-With": "XMLHttpRequest"},
				}).then(function(msg){
						if(msg.body.payload.msg!="token 过期或者token不存在 请重新登陆"){
							if(msg.body.payload.success==1){
							rows.splice(index, 1);
							_this.listLoading = false;
							_this.$message({
											message:"删除成功",
											type:'success'
											});
							//_this.getUsers();
							}else{
								_this.listLoading = false;
								_this.$alert(msg.body.payload.msg,{
								type:'warning'
									});
							}
							}else{
								_this.$alert(msg.payload.msg,{
								type:'warning'
									});
								_this.$router.push({ path: '/login' });
							}
				
				})}).catch(() => {

				});
			},
			//显示分配角色界面
			handlePost:function (index,row) {
				this.getRole();
				this.assignRole = true;
				this.assignForm = Object.assign({},row);

			},
			//显示编辑界面
			handleEdit: function (index, row) {
				this.editFormVisible = true;
				this.editForm = Object.assign({}, row);
			},
			//显示新增界面
			handleAdd: function () {
				this.addFormVisible = true;
				this.addForm = {
					username: '',
				};
			},
			//分配角色
			assignSubmit:function(){
			var tokenname = sessionStorage.getItem("key");
			var _this = this;
			var data = {
					userid:this.assignForm.userid,
					roleid:this.value
				};
			if(this.value!=""){
				this.assignLoading = true;
				$.ajax({
					data:JSON.stringify(data),
					url:"http://101.200.56.75/apis/userRole/updateByUsername?username="+this.assignForm.username+"&token="+tokenname,
					type:"PUT",
					dataType:"JSON",
					contentType:'application/json;charset=UTF-8',
					success:function(msg){
						if(msg.payload.msg!="token 过期或者token不存在 请重新登陆"){
						if(msg.payload.success==1){
							_this.assignRole = false;
							_this.assignLoading = false;
							_this.value="";
							_this.$message({
										message:"分配成功",
										type:'success'
							})}else{
								_this.value="";
								_this.assignLoading = false;
								_this.$alert(msg.payload.msg,{
								type:'warning'
									});
							}
						}else{
								_this.$alert(msg.payload.msg,{
								type:'warning'
									});
								_this.$router.push({ path: '/login' });
							}
					}
				})
			}else{
				_this.assignLoading = false;
				_this.$alert("请选择角色",{
					type:'warning'
				})
				}
			},
			//编辑
			editSubmit: function () {
			var tokenname = sessionStorage.getItem("key");
			var _this = this;
			var data = {
				userid:this.editForm.userid,
				username:this.editForm.username
				};
			if(this.editForm.username!=''){
				this.$confirm('确认提交吗？', '提示', {}).then(() => {
				this.editLoading = true;
				$.ajax({
					data:JSON.stringify(data),
					url:"http://101.200.56.75/apis/user/updateById?token="+tokenname,
					type:"PUT",
					dataType:"JSON",
					contentType:'application/json;charset=UTF-8',
					success:function(msg){
						if(msg.payload.msg!="token 过期或者token不存在 请重新登陆"){
						if(msg.payload.fail==0){
							_this.editLoading = false;
							_this.$alert(msg.payload.msg,{
												type:'warning'
											});
						}else
							{if(msg.payload.content.username==_this.editForm.username&&msg.payload.content.userid==_this.editForm.userid){
															_this.editLoading = false;
															_this.$message({
																			message:'修改成功',
																			type:'success'
																			});
															_this.editFormVisible = false;
															_this.getUsers();
																	}else{
																		_this.$alert(msg.payload.content,{
																		type:'warning'
																		});
									             	                 	_this.editLoading = false;
																				}}
											}else{
												_this.$alert(msg.payload.msg,{
												type:'warning'
											});
												_this.$router.push({ path: '/login' });
								}
						
					},
					error:function(msg){
						_this.$message("修改失败",{
									type:'error'
						})
					}
				})})
			}
			},
			//新增
			addSubmit: function () {
			var tokenname = sessionStorage.getItem("key");
			var _this = this;
			var data = {
            	username:this.addForm.username,
            	password:this.addForm.password
      				};
			if(this.addForm.username!=''){
				this.$confirm('确认提交吗？', '提示', {}).then(() =>{
					this.addLoading = true;
	   				$.ajax({  
	             		data:JSON.stringify(data),       //要发送的数据
	          			url:"http://101.200.56.75/apis/user/create/?token="+tokenname, //url地址 
	              		type:"POST",           //发送的方式  
	             		dataType:"JSON", 
	              		contentType:'application/json;charset=UTF-8', 
	              		success:function(msg){  //处理正确时的信息
	              			if(msg.payload.msg!="token 过期或者token不存在 请重新登陆"){
	              			if(msg.payload.success==1){
	              			if(msg.payload.content.username==_this.addForm.username){
		                 		_this.addLoading = false;
		                 		_this.$message({
		                 							message: '新增成功',
		                 							type: 'success'
		                 									});
	         									_this.$refs['addForm'].resetFields();
		                 	                 	_this.addFormVisible = false;
		                 	                 	_this.getUsers();
		                 	                 	}else{
		                 	                 	_this.addLoading = false;
		                 	                 	_this.$alert(msg.payload.content,{
		                 	                 	type:'warning'
		                 	                 	});
			                 	                 	}}else{
			                 	                 	_this.addLoading = false;
		                 	                 	_this.$alert(msg.payload.msg,{
		                 	                 	type:'warning'
		                 	                 	});
			                 	                 	}
                 	                 	}else{
													_this.$alert(msg.payload.msg,{
													type:'warning'
												});
													_this.$router.push({ path: '/login' });
												}
	              		},
	              		error:function(msg){
	              		_this.$alert("新增请求失败",{
										type: 'error'
									});
	              				}
	          			});
			           })
			          }else{
         				_this.$alert("用户名或密码不能为空！！",{
          				type:'warning'
          })
          }	
			},
			//查询
			getUserId(){
				var tokenname = sessionStorage.getItem("key");
				this.listLoading = true;
				var _this = this;
				var dataId = this.filters.username;
				$.ajax({
					type:"GET",
					url:"http://101.200.56.75/apis/user/getList?page=0&size=10&token="+tokenname+"&sort=userid,asc&key=username&operation=likebe&value="+dataId,
					dataType:"JSON",
					success:function(msg){
						if(msg.payload.msg!="token 过期或者token不存在 请重新登陆"){
							if(msg.payload.fail==0){
								_this.filters.username = null;
									_this.listLoading = false;
									_this.$alert(msg.payload.msg,{
									type:'warning'
									});
								}else{
								if(msg.payload.content.totalElements!=0)
								{
							_this.users = msg.payload.content.content;
							_this.total = msg.payload.content.totalElements;
																_this.listLoading = false;}
								else{
								_this.filters.username = null;
								_this.listLoading = false;
								_this.$alert("没有查询到相关的用户信息",{
											type:'info'
								}).then(() => {
									_this.getUsers();
								})
								}
								}
								
						}else{
									_this.$alert(msg.payload.msg,{
									type:'warning'
									});
									_this.$router.push({ path: '/login' });
								}
						}
				})
				},
				selsChange: function (sels) {
					this.sels = sels;
				},
			},
		mounted() {
			this.getUsers();
			//this.getRole();
		}
	}

</script>

<style scoped>

</style>